<template>
    <el-dialog
        title="审批"
        v-model="showDialog"
        width="400px"
        :lock-scroll="true"
        :close-on-click-modal="false"
        destroy-on-close
        @close="onClose"
    >
        <div class="dialog-content">
            <el-input
                v-model="opinion"
                placeholder="处理意见"
                maxlength="500"
                show-word-limit
                type="textarea"
                :rows="10"
            />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-popconfirm
                    title="正在进行驳回操作，确认继续？"
                    confirmButtonText="确定"
                    cancelButtonText="取消"
                    @confirm="onReject"
                >
                    <template #reference>
                        <el-button type="warning">驳 回</el-button>
                    </template>
                </el-popconfirm>
                <el-popconfirm
                    title="正在进行同意操作，确认继续？"
                    confirmButtonText="确定"
                    cancelButtonText="取消"
                    @confirm="onAgree"
                >
                    <template #reference>
                        <el-button type="primary">同 意</el-button>
                    </template>
                </el-popconfirm>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'

const showDialog = ref(true)

const props = defineProps({
    data: {
        type: Object,
        require: true
    }
})

const emit = defineEmits(['close'])

const opinion = ref('')

const onClose = () => {
    emit('close', false)
}

const onAgree = () => {
    let params = {
        flowTypeCode: props.data.flowTypeCode,
        taskId: props.data.id,
        opinion: opinion.value,
        state: props.data.state,
        operation: 'agree'
    }
    http.fetchJson({
        url: '/flow/task/submit',
        data: params
    }).then((res) => {
        ElNotification({
            title: '提示',
            message: res.message,
            type: 'success'
        })
        emit('close', true)
    })
}

const onReject = () => {
    let params = {
        flowTypeCode: props.data.flowTypeCode,
        taskId: props.data.id,
        opinion: opinion.value,
        state: props.data.state,
        operation: 'reject'
    }
    http.fetchJson({
        url: '/flow/task/reject',
        data: params
    }).then((res) => {
        ElNotification({
            title: '提示',
            message: res.message,
            type: 'success'
        })
        emit('close', true)
    })
}
</script>
<style scoped>
.dialog-content {
    width: 100%;
}

:deep(.el-textarea__inner) {
    padding: 20px;
}
</style>
